<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>11</title>
</head>
<body>
<!--
表单
action:提交后跳转的地址 可以是网站也可以是一个请求处理地址
method:提交方法有post和get两种  get提交的信息可以在url直接看到,不安全高效   post比较安全,传输大文件
-->
<form action="1.MyFirstHtml.html" method="get">
    <!--隐藏hidden 只读readonly 禁用disabled 必填项required 正则pattern-->
    <!--文本框 一般用来输入账号-->
    <p> 账号:<input type="text" name="username" placeholder="请输入你的账号" required> </p>
    <!-- 密码框一般用来输入密码    -->
    <p> 密码:<input type="password" name="pwd"> </p>

    <p>
        <input type="image" src="../resources/imag/1.png" >
    </p>

    <p>
        <input type="text" value="默认值" maxlength="8" size="15">
    </p>
    <p>
        <input type="radio" value="男" name="sex">男
        <input type="radio" value="女" name="sex">女
    </p>

    <p>爱好:
        <input type="checkbox" value="sleep" name="hobby">睡觉
        <input type="checkbox" value="do_code" name="hobby">敲代码
        <input type="checkbox" value="gama" name="hobby">游戏
        <input type="checkbox" value="chat" name="hobby">聊天
    </p>

    <p>
        <input type="button" value="别点我" name="bdw">
    </p>

    <p>
        <!--点击按钮标签有提交表单的左右-->
        <input type="image" src="../resources/imag/1.png" >
    </p>

    <!--select表示一组下拉框  option是下拉框的元素 selected是默认值-->
    <p>国家:
        <select name="china">
            <option value="china"selected>中国</option>
            <option value="els">俄罗斯</option>
            <option value="mg">美国</option>
            <option value="yd">印度</option>
            <option value="rd">瑞典</option>
        </select>
    </p>

    <!--文本域 不太好在网页中可以随意改变大小-->
    <p>
        <textarea cols="20" rows="10">默认值</textarea>
    </p>

    <!--文件域-->
    <p>
        <input type="file" name="files">
    </p>

    <p>邮箱:
        <input type="email" name="email">
    </p>

    <p>URL:
        <input type="url" name="url">
    </p>

    <p>数字:
        <input type="number" name="num" max="100" min="0" step="10">
    </p>

    <p>音量:
        <input type="range" value="voice" max="100" min="0" step="5">
    </p>

    <p>搜索框:
        <input type="search" name="ssss">
    </p>

    <p>
        <input type="submit">
        <input type="reset">
    </p>

    <p>
        <!--增强鼠标可用性-->
        <label for="dwss">点我试试:</label>
        <input type="text" id="dwss">
    </p>
</form>
</body>
</html>